<template>
 <div>
    <h2 v-if="title">{{title}}</h2>
    <div id="pie" :style="{height:height,width:width}" />
 </div>
</template>

<script>
import macarons from '@/assets/theme/macarons'
import { inject, onMounted, reactive, onUnmounted } from 'vue'

export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '4.375rem'
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  setup() {
    let $echarts = inject('echarts')
    let $http = inject('axios')

    let data = reactive({})

    async function getState() {
      data = await $http({url: "/pie/data"})
    }

    onMounted(() => {
      let myChart = $echarts.init(document.getElementById('pie'), macarons)

      getState().then(() => {

        let chartD = data.data.data.chartData;
        let arr = []
        chartD.map(item => {
          let obj = {
            value: '', name: ''
          }
          obj.name = item.title
          obj.value = item.num

          arr.push(obj)
        })
        
        myChart.setOption({
          tooltip: {
            show: true
          },
          legend: {
            top: "bottom"
          },
          series: [
            {
              type: "pie",
              data: arr,
              roseType: 'area',
              radius: [10, 100],
              center: ["50%", "45%"],
              itemStyle: {
                borderRadius: 5
              }
            }
          ]
        })
      })
    
      window.addEventListener("resize", (() => {
        myChart.resize();
      }))
    })

    onUnmounted(() => {
      window.removeEventListener("resize")
    })

    return {
      
    }
  }
}
</script>

<style scoped>
</style>